<template>
<div class="screen">
  <mt-header title="公司" class="title" style="height:6%">
    <span slot="right">类型：</span><span slot="right" style="color: #ffeaed" @click="showTypeList">{{type}}</span>
  </mt-header>
  <div class="littleInterval"></div>
  <div id="list_title">
    <div id="list_left">公司列表</div>
    <div class="search">
      <form>
        <tr>
          <td><label class="glyphicon glyphicon-search searchLable"></label></td>
          <td><input type="text" class="form-control glyphicon glyphicon-search" id="serach" placeholder="搜索"></td>
        </tr>

      </form>
    </div>
  </div>
  <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
    <div class="list_1_div" @click="showCompanyDetail">
      <div class="list_2_div"><span class="span_title">菜鸟网络</span><span class="span_price">福利好</span></div>
      <div class="list_3_div"><span class="county">杭州</span><span class="time_slot">152个热招岗位</span></div>
      <div class="littleInterval"></div>
    </div>
    <div class="list_1_div" @click="showCompanyDetail">
      <div class="list_2_div"><span class="span_title">广州市巴斯特会展有限公司</span><span class="span_price">薪水高</span></div>
      <div class="list_3_div"><span class="county">越秀</span><span class="time_slot">1个热招岗位</span></div>
      <div class="littleInterval"></div>
    </div>
    <div class="list_1_div" @click="showCompanyDetail">
      <div class="list_2_div"><span class="span_title">艾斯艾国际市场调查咨询有限公司</span><span class="span_price">提成</span></div>
      <div class="list_3_div"><span class="county">越秀</span><span class="time_slot">1个热招岗位</span></div>
      <div class="littleInterval"></div>
    </div>
    <div class="list_1_div" @click="showCompanyDetail">
      <div class="list_2_div"><span class="span_title">广州若比邻超市连锁有限公司</span><span class="span_price">福利好</span></div>
      <div class="list_3_div"><span class="county">天河</span><span class="time_slot">3个热招岗位</span></div>
      <div class="littleInterval"></div>
    </div>
    <div class="list_1_div" v-for="item in list" @click="showCompanyDetail">
      <div class="list_2_div"><span class="span_title">喵星人-广州-25</span><span class="span_price">薪水高</span></div>
      <div class="list_3_div"><span class="county">天河</span><span class="time_slot">2个热招岗位</span></div>
      <div class="littleInterval"></div>
    </div>
  </mt-loadmore>

  <mt-popup v-model="popupVisible" position="bottom">
    <mt-picker :slots="slots" :showToolbar="true" @change="onValuesChange">公司类型</mt-picker>
  </mt-popup>
</div>
</template>
<script>
    export default {
        name: "Company",
      data(){
          return{
          popupVisible:false,
            slots: [
              {
                flex: 1,
                values: ['全部','商业零售业', '物流业', '会展业', '餐饮业', '旅游业', '房地产业','广告业','信息咨询服务业','互联网业','环保业','医疗业'],
                className: 'slot1',
                textAlign: 'center'
              }
            ],
            type:"全部",
            length:10,
            list:[1,2,3,4,5,6,7,8,9,0],
            allLoaded:false
        }
      },
      methods:{
        onValuesChange(picker) {
          this.type=picker.getSlotValue(0);
          if(this.type == null){
            this.type="全部";
          }
        },
        showTypeList(){
          this.popupVisible=true;
        },
        loadBottom() {
          // 加载更多数据
          for (let i = 1; i <= 10; i++) {
            this.list.push(i);
          }
          //this.allLoaded = true;// 若数据已全部获取完毕
          this.$refs.loadmore.onBottomLoaded();
        },
        showCompanyDetail(){
          this.$router.push({path:'/companyDetail'})
        }
      }
    }
</script>

<style scoped>
.screen .mint-popup{
  width: 100%;
}
@import "../../../assets/css/common.css";
#list_title{
  height: 4rem;
  line-height: 4rem;
}
#list_left{
  font-size: larger;
  display: inline-block;
  float: left;
  margin-left: 1rem;
}
.list_2_div{
  font-size: large;
  font-weight: bold;
  text-align: left;
  line-height: 5rem;
}
.span_title{
  margin-left: 1rem;
}
.span_price{
  float: right;
  margin-right: 1rem;
  color: #ff862a;
}
.list_3_div{
  text-align: left;
  line-height: 3rem;
}
.county{
  margin-left: 1rem
}
.time_slot{
  margin-left: 1rem;
}
.mint-loadmore {
  height: 83vh;
}
</style>
